<template>
  <div class="resume">
    <div class="information">
      <div class="photo">
        <img src="../assets/img/me.jpg" alt="加载失败">
      </div>
      <div class="personal_information">
        <ul>
          <li><span>姓名:</span><span>陈登裕</span></li>
          <li><span>年龄:</span><span>22</span></li>
          <li><span>电话:</span><span>13225910068</span></li>
          <li><span>住址:</span><span>福州市仓山区</span></li>
          <li><span>邮箱:</span><span>1573959254@qq.com</span></li>
        </ul>
      </div>
    </div>
    <div class="job_information">
      <ul>
        <li>
          <h2>求职意向</h2>
          <ul class="job_container">
            <li><span>从事职位:</span><span>web前端工程师</span></li>
            <li><span>期望月薪:</span><span>3k-4k</span></li>
          </ul>
        </li>
        <li>
          <h2>教育经历</h2>
          <ul class="job_container">
            <li><span>学校名称:</span><span>福州理工学院</span></li>
            <li><span>所学专业:</span><span>软件工程</span></li>
            <li><span>就读时间:</span><span>2017~2021</span></li>
            <li><span>学历学位:</span><span>本科</span></li>
          </ul>
        </li>
        <li>
          <h2>项目经验</h2>
          <ul class="job_container">
            <li><span>项目名称:</span><span>个人博客</span></li>
            <li><span>项目描述:</span><span>使用vue全家桶+nodejs+mangooDB实现个人博客，可以发表文章，留言等功能</span></li>
          </ul>
        </li>
        <li>
          <h2>社交主页</h2>
          <ul class="job_container">
            <li><span>邮箱:</span><span>1573959254@qq.com</span></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Resume"
  }
</script>

<style scoped lang="less">
  .resume {
    width: 100%;
    
    .information {
      width: 100%;
      background: #1A181D;
      display: flex;
      
      .photo {
        flex: 1;
        margin-right: 80px;
        
        img {
          width: 100%;
          height: 100%;
        }
      }
      
      .personal_information {
        flex: 3;
        padding-left: 50px;
        border-left: 2px solid #DFAF55;
        margin: 10px 0;
        
        li {
          span {
            color: #DFAF55;
            line-height: 30px;
          }
        }
      }
    }
    
    .job_information {
      margin-top: 10px;
      width: 100%;
      background: #181818;
      box-shadow: 0 1px 1px #3D3D3D,0 -1px 1px #000;
      overflow: hidden;
      padding-bottom: 20px;
      
      li {
        overflow: hidden;
        padding: 20px 30px 0;
        
        h2 {
          font-weight: bold;
          font-size: 16px;
          border-top: solid 1px #fff;
          padding-top: 10px;
          color: #D8AF55;
        }
        
        .job_container {
          
          li {
            float: left;
            color: #7E7E7E;
            
            span:nth-child(1) {
              color: #D8AF55;
              margin-right: 5px;
            }
          }
        }
      }
      
      
    }
    
    .job_information > ul > li:nth-child(1) {
      padding-top: 0;
      
      h2 {
        border-top: none;
      }
    }
  }
</style>
